<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<a href="#/shouye">首页</a>
			<a href="#/wode">我的</a>
			<a href="#/gouwuche">购物车</a>
			<a href="#/comment">发布评论</a>
			<component :is="comName"></component>
		</div>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			const shouye = {
				template: '<h1>这是首页界面</h1>'
			}
			const wode = {
				template: '<h1>这是我的界面</h1>'
			}
			const gouwuche = {
				template: '<h1>这是购物车界面</h1>'
			}
			const comment = {
				template: '<h1>这是发表评论界面</h1>'
			}
			var vm = new Vue({
				el: '#app',
				data: {
					comName: 'zhuye'
				},
				methods: {},
				components: {
					shouye,
					wode,
					gouwuche,
					comment
				}
			})
			window.onhashchange = function() {
				switch(location.hash.slice(1)) {
					case '/shouye':
					  vm.comName = 'shouye'
					break
					case '/wode':
					  vm.comName = 'wode'
					break
					case '/gouwuche':
					  vm.comName = 'gouwuche'
					break
					case '/comment':
					  vm.comName = 'comment'
					break
				}
			}
		</script>
	</body>
</html>
